﻿/******************************************************************************
* File description: CustomProgressBar.qml
* Function: 一个正常的横着的进度条
* Current Version: 1.0.0
 *****************************************************************************/


import QtQuick 2.12
import QtGraphicalEffects 1.13

Item {

    id: root

    // public =====================================================================

    property real percentage: 0.5           // 进度范围 0~1

    property real percentageMin: 0          // 显示范围 0~100
    property real percentageMax: 100
    property string suffix: "%"         // 显示的单位后缀

    property string percentText: Math.floor(percentage * (percentageMax-percentageMin) + percentageMin).toString() + suffix


    property color color_background: "#F4F4F4"
    property color color_bar: image_background===""?config.themeColor : "transparent"

    // 背景可设置为图片
    property string image_background: ""
    property string image_bar: ""

    property bool showText: true


    height: 10*dp
    width: 200*dp

    Rectangle{      // 底层bar
        id: rect_bg
        radius: root.height / 2
        height: root.height
        width: root.width
        color: color_background
        border.color: Qt.rgba(0, 0, 0, 0.05)
        clip: true
        CustomImage{
            id: image1
            anchors.fill: parent
            visible: false
            source: image_background
        }
        Rectangle{
            id: mask1
            radius: rect_bg.radius
            visible: false
            color: "black"
            anchors.fill: parent
        }
        OpacityMask{        // 图像圆角
            visible: image_background !== ""
            anchors.fill: parent
            source: image1
            maskSource: mask1
        }

    }
    Rectangle{          // 上层bar
        id: bar
        radius: root.height / 2
        height: root.height
        width: percentage*parent.width
        color: color_bar
        CustomImage{
            id: image2
            anchors.fill: parent
            visible: false
            source: image_bar
        }
        Rectangle{
            id: mask2
            radius: rect_bg.radius
            visible: false
            color: "black"
            anchors.fill: parent
        }
        OpacityMask{        // 图像圆角
            visible: image_bar !== ""
            anchors.fill: parent
            source: image2
            maskSource: mask2
        }
    }

    // 进度文本
    Text{
        anchors.verticalCenter: root.verticalCenter
        x: root.width + 10*dp
        font.pixelSize: config.fontsize
        text: percentText
        opacity: 0.8
    }

}
